<template>
    <el-dialog
        custom-class="dialogBorder2"
        :visible.sync="show"
        width="325px"
        :before-close="handleClose"
    >
        <div class="addBranchBox">
            <span class="addText">+</span>
            <span class="addBranchNum">10</span>
            <img src="@/assets/images/result/live.png" class="branchImg1" />
            <img src="@/assets/images/result/ok.png" class="branchImg2" />
        </div>
        <div class="allBranch">恭喜你获得10积分</div>
        <span slot="footer" class="dialog-footer">
            <div @click="dgClose" class="dialogBtn dialogBtn-blue">
                查看规则
            </div>
            <div @click="dgClose" class="dialogBtn dialogBtn-green">
                确 定
            </div>
        </span>
    </el-dialog>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            show: true
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
    },
    methods: {
        handleClose(done) {
            done();
        },
        dgClose() {
            this.show = false;
        },
        dgShow() {
            this.show = true;
        }
    }
};
</script>

<style lang="scss" scoped>
.dialogBorder2 {
    border-radius: 15px;
    .el-dialog__header {
        padding: 0;
    }
    .el-dialog__body {
        padding: 10px 20px 10px 20px;
    }
    .addBranchBox {
        width: 200px;
        margin: 0 auto;
        text-align: center;
        position: relative;
    }
    .addText {
        font-size: 32px;
        font-weight: bold;
        color: #18db60;
    }
    .allBranch {
        font-size: 15px;
        color: #2d3440;
        font-weight: 600;
        margin-top: 15px;
        margin-left: 10px;
    }
    .addBranchNum {
        font-size: 68px;
        font-weight: bold;
        color: #18db60;
        .branchImg1 {
            width: 11px;
            height: 11px;
            position: absolute;
            left: 30px;
            top: 30px;
            opacity: 0.5;
        }
        .branchImg2 {
            width: 23.88px;
            height: 23.88px;
            position: absolute;
            right: 25px;
            top: 40px;
            opacity: 0.5;
        }
    }
}
.dialogBtn {
    display: inline-block;
    width: 65px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    text-align: center;
    border: 1px #000000 solid;
    margin-left: 5px;
    font-size: 12px;
    cursor: pointer;
}
.dialogBtn-blue {
    color: #3980ed;
    background: #ffffff;
    border-color: #3980ed;
}
.dialogBtn-green {
    background: #18db60;
    color: #ffffff;
    border-color: #15ca57;
}
</style>
